/**
* @file index.vue
* @author huang
* @date 2023/8/21
* @description Add a brief description of the file here.
* @projectName
* @email newflyhuang@gmail.com
*/

<template>
  <pure-table ref="pureTable" selection :hide-index="true" :list-api="listApi" :query-condition="queryCondition" @selection-change="handleSelectionChange">
    <template #header>
      <query-panel @query="onQuery">
        <el-form-item prop="name">
          <el-input v-model="queryForm.roleName" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item prop="roleKey">
          <el-input v-model="queryForm.roleKey" placeholder="请输入角色编码" />
        </el-form-item>
        <el-form-item prop="status">
          <el-select v-model="queryForm.status" placeholder="请选择状态">
            <el-option label="启用" value="0" />
            <el-option label="禁用" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="queryForm.rangeDate"
            style="width: 400px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <template #extra>
          <pure-button label="新增" icon="add" @click="onAddRole" />
          <pure-button label="删除" icon="delete" @click="handleDelete" />
        </template>
      </query-panel>
    </template>

    <el-table-column label="角色编号" prop="roleId" width="120" />
    <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="300" />
    <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="280" />
    <el-table-column label="显示顺序" prop="roleSort" width="100" />
    <el-table-column label="状态" align="center" width="100">
      <template #default="{row}">
        <el-switch
          v-model="row.status"
          active-value="0"
          inactive-value="1"
          @change="handleStatusChange(row)"
        />
      </template>
    </el-table-column>
    <el-table-column label="创建时间" align="center" prop="createTime" width="240">
      <template #default="{row}">
        {{ row.createTime }}
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">

      <template #default="{row}">
        <el-button
          size="mini"
          type="text"
          @click="handleUpdate(row)"
        >
          修改
        </el-button>
        <el-button
          size="mini"
          type="text"
          @click="handleDelete(row)"
        >
          删除
        </el-button>

        <el-dropdown size="mini" @command="(command) => handleCommand(command, row)">
          <el-button size="mini" type="text" icon="el-icon-d-arrow-bottom">更多</el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item

                command="handleDataScope"
                icon="el-icon-circle-check"
              >数据权限</el-dropdown-item>
              <el-dropdown-item

                command="handleAuthUser"
                icon="el-icon-user"
              >分配用户</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </el-table-column>

  </pure-table>
</template>

<script>
import QueryPanel from '@/common/components/query/queryPanel.vue';
import DialogNewRole from './dialog/newRole.vue';
import DialogDistributePermission from './dialog/distributePermission.vue';
import SystemRoleApi from './api';
import PureButton from '@/common/components/button/index.vue';
export default {
  components: {
    PureButton,
    QueryPanel,
  },
  data() {
    return {
      listApi: SystemRoleApi.getRoleList,
      queryForm: {
        roleName: '',
        roleKey: '',
        status: '',
        rangeDate: [],
      },
      queryCondition: {},
      ids: [],
    };
  },
  methods: {
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.roleId);
    },
    onQuery() {
      this.queryCondition = {
        ...this.queryForm,
      };
      this.$delete(this.queryCondition, 'rangeDate');
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$dialog({
        component: () => <DialogNewRole title={'修改角色'} data={row} onDone={this.onDone}/>,
      });
    },
    /** 分配数据权限操作 */
    handleDataScope(row) {
      this.$dialog({
        component: () => <DialogDistributePermission title={'分配数据权限'} data={row} onDone={this.onDone}/>,
      });
    },
    handleCommand(command, row) {
      switch (command) {
        case 'handleDataScope':
          this.handleDataScope(row);
          break;
        case 'handleAuthUser':
          this.handleAuthUser(row);
          break;
        default:
          break;
      }
    },
    /** 分配用户操作 */
    handleAuthUser: function (row) {
      const roleId = row.roleId;
      this.$router.push(`/system/authRole/${roleId}`);
    },
    onDone() {
      this.$refs.pureTable.fetchData();
    },
    // 新增角色
    onAddRole() {
      this.$dialog({
        component: () => <DialogNewRole title={'新增角色'} onDone={this.onDone}/>,
      });
    },
    //   删除角色
    handleDelete(row) {
      const roleIds = row?.roleId || this.ids;
      this.$confirm('是否确认删除角色编号为"' + roleIds + '"的数据项？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        await SystemRoleApi.deleteRole(roleIds);
        this.$message({
          type: 'success',
          message: '删除成功!',
        });
        this.onDone();
      }).catch(() => { });
    },
  },

};
</script>

<style lang="scss" scoped>

</style>
